<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 3000px;
      border: 1px solid chocolate;
    }
  </style>
  <script>
    // 此处的 box 报 未定义的错误，因为 代码 自上往下执行
      // <div id="box">xxx</div> 还没被执行呢
      // console.log(box);

    // load 事件的作用：表示 所有的代码都 加载完毕，再执行 load 事件
    window.onload = function() {


      console.log(box);
    }
  </script>
</head>
<body>
  <div id="box">xxx</div>
</body>
</html>
<script>
console.log(111);
// 英文：event - 事件

// 前端中，什么叫 事件 - event
  // 用户 与 页面发生的交互，都叫「事件」，
    // 比如说：用户改变视口的大小、用户滚动滚动条、用户点击DOM元素...


// BOM 相关的事件：
  // 总结：但凡是事件，其名字 都以 on 打头。


// resize：用户改变视口的大小
/* 将回调函数，「绑定」到 resize 事件上。
  window.onresize = function() {
    console.log('resizing...');
  }

  function say() {
    console.log('yo');
  }
  window.onresize = say;
*/


/* 
  document.body  ->  <body /> 和其下面的 DOM元素
  document.documentElement  -> <html /> 和其下面的 DOM元素
*/

// scroll：滚动条事件 +  
// 滚动的距离：document.body.scrollTop || document.documentElement.scrollTop;
window.onscroll = function() {
  // 浏览器的 兼容性问题：
  // 老版本IE：// 浏览器 滚动的 距离  document.body.scrollTop
  // 大部分新浏览：// 浏览器 滚动的 距离
      // document.documentElement.scrollTop

  // 浏览器的兼容性 写法：
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  // console.log('scrollTop', scrollTop);
  var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
}


// onload 
// console.log(box);

</script>